<template>
    <h1>vue的基本信息</h1>
    <p>{{ name }}</p>
    <p>num:{{ num }}</p>
    <p>{{ arr }}</p>
    <p>props</p>
    <p>{{ title }}</p>
    <p>methods</p>
    <button @click="testFn">触发方法</button>
    <p>command</p>
    <p>num2:{{ num2 }}</p>
    <button @click="addOne">num + 1</button>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        }
    },
    data() {
        return {
            name: '李白',
            num: 1,
            arr: [1, 2, 3]
        }
    },

    computed: {
        num2() {
            return this.num + 1
        }
    },
    watch: {
        num: (newVal, oldVal) => {
            console.log('newVal', newVal);
            console.log('oldVal', oldVal);
        },
        num2: (newVal, oldVal) => {
            console.log('computed newVal', newVal);
            console.log('computed oldVal', oldVal);
        },
        
    },
    methods: {
            testFn() {
                console.log("testFn");
                console.log(this.name);
                console.log(this.num);
                this.name = '杜甫'
                this.test()
                //this.testFn()  //(危险)递归
            },
            test() {
                console.log('test 方法')
            },
            addOne() {
                this.num = this.num + 1
            },
        }
    }
</script>